<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '0元试用订单',
  },
}
</route>

<template>
  <view class="page">
    <view class="tabs">
      <text
        class="tab-item"
        @click="changeTab(o)"
        :class="o == tab && 'active'"
        v-for="o in tabs"
        :key="o"
      >
        {{ o }}
      </text>
    </view>
    <view class="search-form">
      <wd-search
        v-model="params.searchText"
        light
        placeholder-left
        placeholder="请输入订单编号、商品名"
      >
        <template #suffix>
          <wd-button
            style="width: 80px; margin-left: 10px"
            type="error"
            size="small"
            @click="search"
          >
            搜索
          </wd-button>
        </template>
      </wd-search>
      <view class="date">
        <text>下单</text>
        <wd-datetime-picker type="date" v-model="params.date" @confirm="handleDateConfirm" />
        <text style="width: 80px" @click="resetDate">
          <wd-icon name="refresh" size="22px"></wd-icon>
          重置
        </text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getOrder } from '@/service/order/index'

const tabs = ref(['抖', '快', '小店'])
const tab = ref('抖')
function changeTab(item) {
  tab.value = item
}

const params = reactive({
  searchText: '',
  date: [],
})

function search() {}
function handleDateConfirm(e) {
  console.log(445, e)
}
function resetDate() {}

onMounted(() => {
  getList()
})
function getList() {
  getOrder({
    dynamicFilter: {
      field: '',
      operator: {},
      value: {},
      logic: {},
      filters: [{}],
    },
    sortList: [
      {
        propName: '',
        order: {},
      },
    ],
    currentPage: 0,
    pageSize: 10,
    filter: {
      payNo: '',
      buyerId: 0,
      shopId: 0,
      agentId: 0,
    },
  })
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  .tab-item {
    width: calc(100% / 4);
    color: #2da870;
    background: white;
    border-radius: 30rpx;
    font-weight: normal;
    padding: 10rpx 0;
    letter-spacing: 1px;
    font-size: 32rpx;
    text-align: center;
    &.active {
      color: white;
      background: #2da870;
    }
  }
}

.search-form {
  background: #ededed;

  .date {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    color: #444;
    font-size: 24rpx;
    padding-left: 10px;
    .wd-picker {
      flex: 1;
      margin: 0 10rpx;
      :deep(.wd-picker__value) {
        uni-view {
          display: flex;
          align-items: center;
          uni-text {
            flex: 1;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
